<template>
    <div>
        <e-charts id="main" class="chart" :option="option" />
    </div>
</template>

<script setup>
import { onMounted } from "vue";
import * as echarts from 'echarts';
var option;
onMounted(() => {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);

    option = {

        series: [
            {
                name: 123,
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 15, name: '其他' },
                    { value: 30, name: '租赁' },
                    { value: 55, name: '自住' }
                ],
                label: {
                    fontSize: 15,
                    formatter: `{b}\n\n{d}%`,
                },
                labelLine: {
                    length: 20,
                    length2: 30
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    option && myChart.setOption(option);
});
</script>

<style scoped>
.chart {
    width: 335px;
    height: 200px;
}
</style>